<!DOCTYPE html>
<html>
<head>
	<title>Map Tiles Downloader</title>
	<meta charset="utf-8"/>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<!-- TODO replace jquery with react -->
	<script src="jquery.min.js"></script> 

    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />

	<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
	<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.js'></script>
	<script src='mapbox-gl-draw-rectangle-mode.min.js'></script>
	<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.0.9/mapbox-gl-draw.css' type='text/css'/>

	<script src='https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js'></script>

	<script src="async.min.js"></script>
	<script src="turf.min.js"></script>

	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i" rel="stylesheet"> 
	<script src="materialize/js/materialize.min.js"></script>
	<link href='materialize/css/materialize.min.css' rel='stylesheet' type='text/css' />

	<script src="main.js"></script>
	<link href='fonts/fonts.css' rel='stylesheet' type='text/css' />
	<link href='style.css' rel='stylesheet' type='text/css' />
</head>
<body>

	<div id='max-height'>
		
		<div id='map-view'></div>

		<div id='main-title'>Map Tiles Downloader</div>

	</div>

	<div class='sidebar' id='main-sidebar'>

		<div class='step-number'>
			1
		</div>
		<div class="step-title">
			Search an Area
		</div>

		<form id='search-form' class='sidebar-section row'>
			<div class="input-field col s12">
				<input id="location-box" type="text" value="New York" />
				<label for="location-box">Enter a location</label>
			</div>
		</form>


		<div class='step-number'>
			2
		</div>
		<div class="step-title">
			Select a Region
		</div>

		<div class='center-align sidebar-section'>
			<p>
				<a class="waves-effect waves-light z-depth-0 btn-small orange darken-3" id='rectangle-draw-button'>Draw a rectangle</a>
			</p>
		</div>

		<div class='step-number'>
			3
		</div>
		<div class="step-title">
			Configure
		</div>

		<div class='sidebar-section'>
			<div class="row">
				<div class="input-field col s6">
					<input id="zoom-from-box" type="text" value='15'/>
					<label for="zoom-from-box" class="active">Zoom from:</label>
				</div>
				<div class="input-field col s6">
					<input id="zoom-to-box" type="text" value='15'/>
					<label for="zoom-to-box" class="active">Zoom to:</label>
				</div>
			</div>


			<div class="row">
				<div class="input-field col s10">
					<input id="source-box" type="text" value='http://ecn.t0.tiles.virtualearth.net/tiles/a{quad}.jpeg?g=129&mkt=en&stl=H'>
					<label for="source-box">Map Tile Source</label>
				</div>
				<div class="input-field col s2">
					<a class='waves-effect waves-light btn-small blue-grey lighten-2 z-depth-0 dropdown-trigger' id='source-select' href='#' data-target='sources'>⯆</a>

					<ul id='sources' class='dropdown-content'>
					</ul>
				</div>
			</div>

			<div class='center-align'>
				<a class="waves-effect waves-light z-depth-0 btn-small orange darken-3" id='grid-preview-button'>Preview Grid</a>
			</div>

		</div>

		<div class='step-number'>
			4
		</div>
		<div class="step-title">
			<a href='javascript:void(0)' id='more-options-toggle'>More Options (+)</a>
		</div>

		<div style='display:none;' id='more-options' class='sidebar-section row'>

			<div class="input-field col s12">
				<select id="output-scale" type="text">
					<option value="1">1x</option>
					<option value="2">2x</option>
				</select>
				<label for="output-scale">Output scale</label>
			</div>

			<div class="input-field col s12">
				<input id="output-directory-box" type="text" value="{timestamp}">
				<label for="output-directory-box">Output directory</label>
			</div>

			<div class="input-field col s12">
				<select id="output-type" type="text">
					<option value="directory">Directory</option>
					<option value="mbtiles">Mbtiles</option>
					<option value="repo">Repo</option>
				</select>
				<label for="output-type">Output type</label>
			</div>

			<div class="input-field col s12">
				<input id="output-file-box" type="text" value="{z}/{x}/{y}.png">
				<label for="output-file-box">Output file</label>
			</div>

			<div class="input-field col s12">
				<input id="parallel-threads-box" type="text" value="4">
				<label for="parallel-threads-box">Parallel downloads</label>
			</div>
		</div>

		<button class='waves-effect waves-light z-depth-0 btn-large cyan darken-2 bottom-button' id='download-button'>Download</button>

	</div>

	<div class='sidebar' id='download-sidebar' style="display: none;">

		<div class='step-number'>
			5
		</div>
		<div class="step-title">
			Downloading tiles
		</div>
		<div class="hints sidebar-section">
			Please wait...
		</div>

		<div class="sidebar-section">
			<div id='progress-radial' class=''>
	
			</div>
	
			<p id='progress-subtitle' class=''>
	
			</p>
	
			<p class='tile-strip '>
			</p>

		</div>
	
		<textarea id='log-view' class="sidebar-section"></textarea>

		<button class='waves-effect waves-light z-depth-0 btn-large red lighten-5 bottom-button' id='stop-button'>Stop</button>

	</div>

</body>
</html>